/** 合同列表 */

import React, {useEffect, useState} from 'react'
import type {ColumnsType} from 'antd/es/table'
import {message, Button, Tag} from 'antd'
import moment from 'moment'
import {history} from 'umi'
import SearchForm from '@/components/SearchForm'
import {getSelectContractList} from '@/service/supplier/supplierArchives'
import CustomTable from '@/components/Table'
import {auditStatus} from '@/pages/purchase/dict'

interface DataType {
	requisitionId: string | string[] | null
	applyId: string | string[] | null
	id: any
	finishTime: any
	startTime: any
	supplierCode: string
	supplierName: string
	serviceType: string
	contacts: string
	status: string
	date: string
}
const formItemLayout = {
	labelCol: {flex: '100px'},
	wrapperCol: {flex: '1'},
}

const contract = (props: {supplierId: string}) => {
	const {supplierId} = props
	const [dataSource, setDataSource] = useState([])
	const [searchData, setSearchData] = useState({})
	const [loading, setLoading] = useState<boolean>(false)
	const [total, setTotal] = useState()
	const [params, setParams] = useState({
		current: 1,
		size: 10,
	})

	// 获取合同列表
	const getData = () => {
		setLoading(true)
		getSelectContractList({
			...params,
			supplierId,
			...searchData,
		})
			.then((res: any) => {
				if (res?.success) {
					setDataSource(res?.data?.records)
					setTotal(res?.data?.total)
					setLoading(false)
				}
			})
			.catch((err) => {
				setDataSource([])
				message.error(err)
				setLoading(false)
			})
	}
	useEffect(() => {
		getData()
	}, [params])

	const columns: ColumnsType<DataType> = [
		{
			title: '合同编号',
			dataIndex: 'contractNo',
			align: 'center',
			width: 280,
			render: (text, record) => (
				<Button
					type="link"
					size="small"
					onClick={() => {
						history.push({
							pathname: '/purchase/contract/view',
							query: {
								id: record.id,
							},
						})
					}}>
					{text}
				</Button>
			),
		},
		{
			title: '合同签订日期',
			dataIndex: 'createTime',
			align: 'center',
			width: 160,
		},
		{
			title: '采购类目',
			dataIndex: 'requisitionName',
			align: 'center',
			width: 100,
		},
		{
			title: '需求组织',
			dataIndex: 'requisitionOrgname',
			align: 'center',
			width: 100,
		},
		{
			title: '合同名称',
			dataIndex: 'contractName',
			align: 'center',
			width: 180,
		},
		{
			title: '采购方',
			dataIndex: 'purchaserName',
			align: 'center',
			width: 150,
		},
		{
			title: '供应商',
			dataIndex: 'supplierName',
			align: 'center',
			width: 150,
		},
		{
			title: '合同金额（元）',
			dataIndex: 'amount',
			align: 'center',
			width: 150,
		},
		{
			title: '采购申请单号',
			dataIndex: 'requisitionNo',
			align: 'center',
			width: 200,
			render: (text, record) => (
				<Button
					type="link"
					size="small"
					onClick={() => {
						history.push({
							pathname: '/purchase/apply/view',
							query: {
								id: record.requisitionId,
							},
						})
					}}>
					{text}
				</Button>
			),
		},
		{
			title: '合同期限',
			dataIndex: 'startTime',
			align: 'center',
			width: 200,
			render: (text: any, record) => (
				<>
					{moment(record?.startTime).format('YYYY-MM-DD')} -{' '}
					{moment(record?.finishTime).format('YYYY-MM-DD')}
				</>
			),
		},
		{
			title: '到期天数',
			dataIndex: 'status',
			align: 'center',
			width: 100,
			render: (text: any, record) => {
				const data = moment(record?.finishTime).diff(
					moment().format('YYYY-MM-DD'),
					'day',
				)
				return (
					<span style={{color: data < 0 ? '#FF2E30' : '#333333'}}>
						{data < 0 ? '已到期' : ''}
						{Math.abs(data)}天
					</span>
				)
			},
		},
		{
			title: '审核状态',
			dataIndex: 'auditStatus',
			align: 'center',
			width: 140,
			render: (text: number, record: any) => (
				<>
					{auditStatus?.map((item: {key: number; label: string}) => {
						if (item?.key === Number(text)) {
							return (
								<Tag color="processing" key={record?.id}>
									{item?.label}
								</Tag>
							)
						}
						return null
					})}
				</>
			),
		},
	]
	const formItems: any[] = [
		{
			type: 'group',
			key: 'group1',
			groupItems: [
				{
					type: 'input',
					label: '合同编号',
					name: 'contractNo',
					key: 'contractNo',
				},
				{
					type: 'input',
					label: '合同名称',
					name: 'contractName',
					key: 'contractName',
				},
				{
					type: 'input',
					label: '采购申请单号',
					name: 'requisitionNo',
					key: 'requisitionNo',
				},
			],
		},
	]

	const onFinish = (value: any) => {
		setSearchData(value)
		setParams({
			current: 1,
			size: 10,
		})
	}
	const onReset = () => {
		setSearchData({})
		setParams({
			current: 1,
			size: 10,
		})
	}
	return (
		<div>
			<SearchForm
				onFinish={onFinish}
				onReset={onReset}
				formItems={formItems}
				formLayout={formItemLayout}
				style={{marginBottom: '12px'}}
			/>
			<CustomTable
				params={params}
				columns={columns}
				total={total}
				pagination
				callback={(pagination: any) => {
					setParams(pagination)
				}}
				loading={loading}
				dataSource={dataSource}
			/>
		</div>
	)
}

export default contract
